Vue.component('lee',{
    template:`
        <div class="lee_box">
            <transition v-for="(i,$index) in arr" :name="tranname">
                <div class="img" v-show="$index==index" :class="$index==index?'index':''">
                    <img :src="i">
                </div>
            </transition>
            
            <div class="l" @click="l">
                <
            </div>
            <div class="r" @click="r">
                >
            </div>
        </div>
    `,
    props:['imgarr'],
    data() {
        return {
            arr:this.imgarr,
            index:0,
            tranname:'no1'
        }
    },
    methods: {
        l(){
            //no1
            this.tranname = 'no1'
            this.index--
            if(this.index<=-1){
                this.index = this.arr.length-1
            }
        },
        r(){
            //no2
            this.tranname = 'no2'
            this.index++
            if(this.index>=this.arr.length){
                this.index=0
            }
        }
    },
})
// 高度自适应
Vue.directive('autoh',{
    inserted(dom){
        let div = dom.querySelectorAll('div')[0]
        let h = div.offsetHeight
        dom.style.height = h+'px'
    }
})

